<template>
  <div id="czrz"
       style="margin-left:15px">
    <div style="margin-top:20px">
      <el-form class="my-search-form-box"
               :model="canshu.condition"
               inline>
        <div class="my-search-form-left">
          <el-form-item label="单位名称：">
            <el-input v-model="canshu.condition.dept_name"
                      clearable
                      @change="handleScreach"
                      placeholder="请选择单位名称">
            </el-input>
            <!-- <el-select v-model="canshu.condition.dept_id"
                       @change="handleScreach"
                       clearable
                       placeholder="请选择单位名称">
              <el-option v-for="(item, index) in select_list"
                         :key="index"
                         :label="item.bmjc"
                         :value="item.bmid">
              </el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="姓名："
                        prop="xxlx">
            <el-input v-model="canshu.condition.user_name"
                      clearable
                      @change="handleScreach"
                      placeholder="请输入姓名">
            </el-input>

          </el-form-item>

        </div>

      </el-form>
    </div>
    <el-table :data="tableData"
              class="tablelist"
              @row-dblclick='table_click'
              :header-cell-style="{background:'#49B0FF',color:'#fff'}"
              style="width: 100%">

      <el-table-column type="index"
                       label="序号"
                       show-overflow-tooltip
                       align="center"
                       width="80">
      </el-table-column>

      <el-table-column prop="userName"
                       label="姓名"
                       show-overflow-tooltip
                       align="center"
                       width="100">
      </el-table-column>

      <el-table-column prop="deptName"
                       label="单位名称"
                       show-overflow-tooltip
                       align="center"
                       width="120">
      </el-table-column>

      <el-table-column prop="state"
                       label="操作结果"
                       show-overflow-tooltip
                       align="center"
                       width="120">
      </el-table-column>

      <el-table-column prop="api"
                       label="模块"
                       show-overflow-tooltip
                       align="center"
                       width="160">
      </el-table-column>

      <el-table-column prop="apiOperation"
                       label="子模块"
                       show-overflow-tooltip
                       align="center"
                       width="180">
      </el-table-column>

      <el-table-column prop="className"
                       label="类名"
                       show-overflow-tooltip
                       align="center"
                       width="160">
      </el-table-column>

      <el-table-column prop="methodName"
                       label="方法名"
                       show-overflow-tooltip
                       align="center"
                       width="120">
      </el-table-column>

      <el-table-column prop="param"
                       label="访问参数"
                       show-overflow-tooltip
                       align="center">
      </el-table-column>

      <el-table-column prop="url"
                       label="访问地址"
                       show-overflow-tooltip
                       align="center"
                       width="180">
      </el-table-column>

      <el-table-column prop="ip"
                       label="访问ip地址"
                       show-overflow-tooltip
                       align="center"
                       width="150">
      </el-table-column>

      <el-table-column prop="enabled"
                       label="有效标识"
                       show-overflow-tooltip
                       align="center"
                       width="100">
      </el-table-column>

      <el-table-column prop="operationTime"
                       label="访问时间"
                       show-overflow-tooltip
                       align="center"
                       width="200">
      </el-table-column>

    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="canshu.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      canshu: {
        pageNum: '1',
        pageSize: '10',
        total: null,
        condition: {
          dept_id: '',
          dept_name: '',
          user_name: '',
          api_operation: '',
        },
      },
      select_list: [],
    }
  },
  watch: {},
  created() {
    // this.Department()
    this.axios_page()
  },
  mounted() {},
  methods: {
    Department() {
      this.$axios.post('communal/dept/selector').then((res) => {
        console.log(res)
        if (res) {
          res.forEach((s) => {
            s.deptId = s.deptId + ''
            s.bmid = s.bmid + ''
          })
          this.select_list = res
        }
      })
    },
    handleScreach() {
      this.axios_page()
    },
    table_click(e) {
      console.log(e.logId)
      //    http://192.168.1.20:9011/api/decision/operation_log/detail/{logId}
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.canshu.pageSize = val
      this.axios_page()
    },
    handleCurrentChange(val) {
      this.canshu.pageNum = val
      this.axios_page()
      console.log(`当前页: ${val}`)
    },
    axios_page() {
      this.$axios.post('operation_log/getPage', this.canshu).then((res) => {
        console.log(res)
        res.records.forEach((data) => {
          data.operationTime = this.renderTime(data.operationTime)
        })
        this.tableData = res.records
        this.canshu.total = res.total
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#czrz {
  .my-search-form-left {
    padding: 5px 10px;
    background: #e5f1fb;
    border-left: 2px solid #2387e2;
  }
  height: 100%;
  overflow: hidden;
  h2 {
    font-size: 26px;
    margin-top: 30px;
  }
  .tablelist {
    border-top: 1px solid rgb(233, 233, 233);
    //   border-bottom: 1px solid #ccc;
    margin-top: 19px;
    height: calc(100% - 161px);
    ::v-deep .cell {
      height: 44px;
      line-height: 44px;
    }
    ::v-deep .el-table__body-wrapper {
      height: 100%;
      overflow: auto;
    }
  }
  .pagination {
    margin-top: 15px;
    text-align: right;
  }
}
</style>

